<template>
  <div class="traceability">

    <div class="head">
      <div class="xbg">
        <img src="/public/traceability/logo.jpg" class="logo"/>
        <img src="/public/traceability/bg2.png"/>
      </div>
    </div>
    <div class="img-container">
      <img src="/public/traceability/bg3.jpg"/>
    </div>
    <template  v-if="data.data&&data.data.length>0">
      <div class="text1">
        <div class="title">真溯源 享受安心</div>
        <div>
          小蝌豆溯源的每一份产品都有自己的“身份证”<br/>
          向您展示食物如何从田间来到餐桌<br/>
          您可以查看到每个生产环节<br/>
          负责人和生产检验时间
        </div>
      </div>
      <div class="text2">
        <div class="key">最近一次查询时间</div>
        <div class="value">{{ data.data[0].firsttime }}</div>
        <div class="key">区块链数字证书</div>
        <div class="value">{{ data.data[0].qkcode }}</div>
        <div class="key">证书日期</div>
        <div class="value">{{ data.data[0].qktime }}</div>
        <div class="key">追溯编码s</div>
        <div class="value">{{ data.data[0].firsttime }}</div>
      </div>
      <div class="text-container">
        <div class="title">
          <div class="content">产品信息</div>
        </div>
        <table>
          <tbody>
            <tr>
              <td>产品名称：</td><td>{{ data.data[0].productname }}</td>
            </tr>
            <tr>
              <td>产品标准：</td><td>{{ data.data[0].productbiaozhun }}</td>
            </tr>
            <tr>
              <td>生产农场：</td><td>{{ data.data[0].prodouct_farm }}</td>
            </tr>
            <tr>
              <td>生产时间：</td><td>{{ data.data[0].prodouct_time }}</td>
            </tr>
            <tr>
              <td>内部编码：</td><td>{{ data.data[0].prodouct_code }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="tips">*该信息由{{ data.data[0].coname }}</div>


      <div class="text-container">
        <div class="title">
          <div class="content">加工溯源</div>
        </div>
        <div class="img-container">
          <img src="/public/traceability/jiagongsuyuan.jpg"/>
          <div class="_tips" :style='{"font-size":(638-20)/(data.data[0].coname.length+13)+"px"}'>您享用的蔬菜由{{data.data[0].coname}}提供加工完成</div>
        </div>
        <table>
          <tbody>
            <tr>
              <td>加工厂名称：</td><td>{{ data.data[0].facname }}</td>
            </tr>
            <tr>
              <td>加工标准：</td><td>{{ data.data[0].facbiaozhun }}</td>
            </tr>
            <tr>
              <td>厂长：</td><td>{{ data.data[0].facheadname }}</td>
            </tr>
            <tr>
              <td>加工组名：</td><td>{{ data.data[0].facgroupname }}</td>
            </tr>
            <tr>
              <td>加工组员：</td><td>{{ data.data[0].facgroupmember }}</td>
            </tr>
            <tr>
              <td>任务时间：</td><td>{{ data.data[0].facjobtime }}</td>
            </tr>
            <tr>
              <td>加工批次：</td><td>{{ data.data[0].facjobpici }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="tips">*该信息由{{ data.data[0].coname }}</div>

      <div class="text-container">
        <div class="title">
          <div class="content">农场溯源</div>
        </div>
        <div class="img-container">
          <img src="/public/traceability/jiagongsuyuan.jpg"/>
          <div class="_tips" :style='{"font-size":(638-20)/(data.data[0].farmheadman.length+17)+"px"}'>您吃到的产品由安心农场主：{{data.data[0].farmheadman}}为您提供</div>
        </div>
        <table>
          <tbody>
            <tr>
              <td>农场名称：</td><td>{{ data.data[0].farmname }}</td>
            </tr>
            <tr>
              <td>地址：</td><td>{{ data.data[0].farmaddress }}</td>
            </tr>
            <tr>
              <td>农场主：</td><td>{{ data.data[0].farmheadman }}</td>
            </tr>
            <tr>
              <td>采收人：</td><td>{{ data.data[0].farmcsman }}</td>
            </tr>
            <tr>
              <td>采收时间：</td><td>{{ data.data[0].farmcstime }}</td>
            </tr>
            <tr>
              <td>采收批次：</td><td>{{ data.data[0].farmcspici }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="tips">*该信息由{{ data.data[0].coname }}</div>

      <div class="text-container">
        <div class="title">
          <div class="content">种&养殖溯源</div>
        </div>
        <div class="img-container">
          <img src="/public/traceability/jiagongsuyuan.jpg"/>
          <div class="_tips">严格按照农业标准进行科学种植&养殖</div>
        </div>
        <table>
          <tbody>
            <tr>
              <td>区域：</td><td>{{ data.data[0].farmarea }}</td>
            </tr>
            <tr>
              <td>负责人：</td><td>{{ data.data[0].farmplanman }}</td>
            </tr>
            <tr>
              <td>种养标准：</td><td>{{ data.data[0].productbiaozhun }}</td>
            </tr>
            <tr>
              <td>种养时间：</td><td>{{ data.data[0].farmzytime }}</td>
            </tr>
            <tr>
              <td>种养批次号：</td><td>{{ data.data[0].farmzycspici }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="tips">*该信息由{{ data.data[0].coname }}</div>
    </template>
    <div class="text2" style="padding-top: 30px;color: red;" v-else>
      <div class="value">未查询到相关数据信息！</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const route = useRoute();
console.log(route.params.code);
const url = 'https://api.minikedou.com/api/Traceability_info/'+route.params.code;
const { data, error,refresh } = await useAsyncData('list',()=>$fetch(url));

</script>

<style scoped lang="scss">
.traceability{
  width:700px;
  margin:0 auto;
  .head{
    background-image: url(/public/traceability/bg.jpg);
    overflow: hidden;
    .xbg{
      width:453px;
      position: relative;
      margin:55px auto;
      .logo{
        position:absolute;
        width:50%;
        left:25%;
        top:9%;
      }
    }
  }
  .img-container{
    text-align: center;
    margin-top:40px;
  }
  .text1{
    text-align: center;
    color:#999;
    margin-top:20px;
    font-size:24px;
    line-height: 2;
    .title{
      color:#00aa3a;
      font-size:40px;
      font-weight: bold;
    }
  }
  .text2{
    background-color: #f8f8f8;
    text-align: center;
    margin-top:40px;
    padding:0 20px 30px;
    .key{
      font-size: 28px;
      color: #999;
      line-height: 3;
    }
    .value{
      font-size: 20px;
      word-wrap:break-word;
      text-decoration: underline;
      line-height:1.5;
    }
  }
  .text-container{
    position:relative;
    border:1px solid #00aa3a;
    padding:10px 30px 30px;
    margin-top:40px;
    .title{
      font-size: 40px;
      position:absolute;
      top:-20px;left:0;
      width:100%;
      text-align: center;
      .content{
        color:#00aa3a;
        background-color:#fff;
        padding:0 35px;
        display: inline-block;
      }
    }
    .img-container{
      position:relative;
      margin-top:0;
      img{
        width:100%;
        vertical-align: middle;
        margin-top:30px;
      }
      ._tips{
        position: absolute;
        bottom:0;
        left:0;
        width:100%;
        background-color: rgba(0,24,40,.3);
        color:#fff;
        line-height:1.8;
        font-size:24px;
      }
    }
    table{
      margin-top: 40px;
      font-size:26px;
      color:#737373;
      border-top:1px dashed #bbbbbb;
      width:100%;
      td{
        border-bottom:1px dashed #bbbbbb;
        padding:13px;
      }
      td:first-child{
        width:160px;
        border-right:1px dashed #bbbbbb;
      }
    }
  }
  .tips{
    color:#b6b6b6;
    font-size:22px;
    text-align: center;
    margin:40px;
  }
}
</style>